<template>
    <div class="form">
    <el-form class="form" ref="form" :model="form" label-width="80px">
        <el-form-item class="input" label="贷款金额">
            <el-input v-model="num" placeholder="单位:元" @change="getCount"></el-input>
        </el-form-item>
        <el-form-item class="input" label="贷款期限">
            <el-input v-model="time" placeholder="单位:月" @change="getCount"></el-input>
        </el-form-item>
        <el-form-item class="input" label="贷款利率">
            <el-input v-model="rate" placeholder="年利率, 单位:%" @change="getCount"></el-input>
        </el-form-item>
        <el-form-item class="input">
            <el-button type="primary" @click="onSubmit">立即创建</el-button>
            <el-button @click="onCancel">取消</el-button>
        </el-form-item>
    </el-form>
    <div class="result">
            <p>月还款额(单位:元) : {{result}}</p>
        </div>
        <div class="result">
            <p id="message" style="color:grey">计算数据与结果仅供参考，具体金额以实际情况为准。</p>
        </div>
        
    </div>
</template>
<script>
export default {
    data() {
        return {
            num:'',
            time:'',
            rate:'',
            result:'0',
            
        }
    },
    methods: {
        onSubmit() {
            let mrate = this.rate / 12;
            this.result = this.num*mrate*(Math.pow((1+mrate),this.time)/(Math.pow((1+mrate),this.time)-1))
            if(isNaN(this.result)) {
                this.result = 0
            }
        },
        onCancel() {
            this.num='';
            this.time='';
            this.rate='';
            this.result = 0;
        }
    }
}
</script>

<style scoped>
.form {
    
    width:500px;
    
}
.input{
    margin-left: auto;
    margin-right: auto;
    margin-top:30px;
    width: 400px;
}
.result{
    margin-left: 60px;
    margin-right: auto;
    margin-top:30px;
}
</style>